<template>
	<!-- 报表 -->
	<div class="layout-padding">
		<splitpanes>
			<pane size="15">
				<div class="layout-padding-auto layout-padding-view">
					<div class="seach"></div>
					<el-tree
						style="max-width: 600px; height: 87vh; overflow-y: auto"
						:default-expand-all="true"
						:highlight-current="true"
						:data="data"
						:expand-on-click-node="false"
						:props="defaultProps"
						@node-click="handleNodeClick"
					/>
				</div>
			</pane>
			<pane class="ml8">
				<div class="layout-padding-auto layout-padding-view">
					<div class="seach-box">
						<div class="date-select">
							<!-- <el-select v-model="dateItmeType" class="fenxi-select" popper-class="set-select" @change="dateTypeChange3"> -->
							<!-- <el-option label="日" value="date"></el-option>
								<el-option label="月" value="month"></el-option>
								<el-option label="年" value="year"></el-option> -->
							<!-- <el-option label="任意时间" value="time"></el-option> -->
							<!-- </el-select> -->
							<span class="label">时间:</span>
							<el-date-picker
								v-if="selectOption == 0"
								v-model="timeValue3"
								:type="dateItmeType"
								:value-format="dateFormat3"
								:disabled-date="pickerOptions1"
								popper-class="set-picker-default"
								@change="changeDate3"
							/>
							<el-date-picker
								v-else
								style="
									width: 360px;
									background-color: transparent;
									border: 1px solid #0293c3;
									border-radius: 0 4px 4px 0;
									box-shadow: none;
									height: 28px;
									line-height: 28px;
								"
								v-model="value2"
								type="datetimerange"
								placeholder="请选择"
								:value-format="dateFormat2"
								@change="changeDate2"
							/>
						</div>
						<div>
							<span class="label">电力类别:</span>
							<el-select v-model="valueType" multiple filterable placeholder="选择电力类别" style="width: 360px" @change="getForm">
								<el-option v-for="item in powerOptions" :key="item.value" :label="item.name" :value="item.identifier" />
							</el-select>
						</div>
						<el-button type="primary" icon="el-icon-search" @click="getForm">查询</el-button>
					</div>
					<div style="margin-bottom: 10px">
						<el-button :type="flag === 'chart' ? 'primary' : 'default'" icon="el-icon-histogram" @click="changeShow('chart')">图表</el-button>
						<el-button class="filter-item" plain type="primary" icon="el-icon-download" @click="exportBtn">导出 </el-button>
					</div>
					<div>
						<div v-show="flag === 'chart'" class="chart" ref="chart"></div>
						<avue-crud v-show="flag === 'table'" :data="FormData" :option="option"> </avue-crud>
					</div>
				</div>
			</pane>
		</splitpanes>
	</div>
</template>

<script>
import {
	getList,
	getQueryList,
	getForm,
	getCurveQuery,
	getCurveDMYQuery,
	getThingModelByProductKey,
} from '/@/api/powerdistribution/electricity/reportForms';
import * as XLSX from 'xlsx';
import ExportJsonExcel from 'js-export-excel';
import echarts from '/@/utils/chart.js';
import moment from 'moment/moment';
import { getDateByType } from '/@/util/util';
export default {
	name: 'index',
	data() {
		return {
			FormData: [{}],
			option: {
				align: 'center',
				addBtn: false,
				maxHeight: 680,
				delBtn: false,
				editBtn: false,
				refreshBtn: false,
				columnBtn: false,
				searchShow: false,
				header: false,
				border: true,
				menu: false,
				unitNo: '',
				column: [
					{
						label: '时间',
						prop: 'hour',
					},
					{
						label: 'A相电压',
						prop: 'aphaseVoltage',
					},
					{
						label: 'B相电压',
						prop: 'bphaseVoltage',
					},
					{
						label: 'C相电压',
						prop: 'cphaseVoltage',
					},
					{
						label: 'A相电流',
						prop: 'aphaseCurrent',
					},
					{
						label: 'B相电流',
						prop: 'bphaseCurrent',
					},
					{
						label: 'C相电流',
						prop: 'cphaseCurrent',
					},
					{
						label: '总有功功率',
						prop: 'totalActivePower',
					},
				],
			},
			flag: 'chart',
			options: [
				{
					value: 'voltage',
					label: '电压',
				},
				{
					value: 'electricity',
					label: '电流',
				},
				{
					value: 'totalPower',
					label: '总有功功率',
				},
			],
			powerOptions: [],
			value1: moment().format('YYYY-MM-DD'),
			valueType: [],
			defaultProps: {
				children: 'bumDevLists',
				label: 'devName',
			},
			data: [],
			resData: [],
			totalPower: [{ comprehensiveData: [], unitName: '总有功功率' }],
			compareType: 0,
			dateFormat2: 'YYYY-MM-DD HH:mm:ss',
			yearTab: '',
			value3: '',
			dateType3: 'date',
			dateFormat3: 'YYYY-MM-DD',
			showStartYear: new Date().getFullYear(),
			showEndYear: new Date().getFullYear(),
			dateValue: { startYear: 2010, endYear: new Date().getFullYear() },
			startYear: new Date().getFullYear(),
			endYear: new Date().getFullYear(),
			year: '',
			month: '',
			date: '',
			// ---
			value2: '',
			selectOption: 1,
			dateItmeType: 'time',
			timeValue3: '',
			dateFormat3: 'YYYY-MM-DD',
		};
	},
	mounted() {
		this.getList();
	},
	created() {
		let dateObj = this.getNowDate();
		this.timeValue3 = dateObj.date;
		this.value2 = [this.getNowDate().date + ' 00:00:00', this.getNowDate().date + ' 23:59:59'];
	},
	methods: {
		changeShow(val) {
			this.flag = val;
		},
		findCommonElements(arr1, arr2) {
			return arr1.filter((item) => arr2.includes(item));
		},
		getList() {
			getQueryList().then((res) => {
				this.data = res.data.map((item) => {
					item.devName = item.switchRoomName;
					return item;
				});
				this.unitNo = this.data[0].bumDevLists[0].unitNo;
				this.powerLoadData();
			});
		},
		powerLoadData() {
			getThingModelByProductKey({ productKey: 'c9b32b9702c64f0d' }).then((res) => {
				this.powerOptions = res.data.model.properties;
				let aaa = [];
				aaa.push(this.powerOptions[0].identifier);
				this.valueType = aaa;
				this.getForm();
			});
		},
		getData() {
			this.FormData = this.resData;
		},
		handleNodeClick(data, node, self) {
			if (data.unitNo === undefined) {
				this.$message.warning('当前菜单点击无效！');
			} else {
				this.unitNo = data.unitNo;
				this.getForm();
			}
		},
		getForm() {
			var keys = this.valueType;
			getCurveQuery({
				keys: keys.length === 0 ? '' : keys,
				unitNo: this.unitNo,
				startTime: this.value2[0],
				endTime: this.value2[1],
			}).then((res) => {
				let combinedArray = [];
				res.forEach((item1) => {
					this.powerOptions.forEach((item2) => {
						if (item1.id === item2.identifier) {
							let combinedItem = Object.assign({}, item1, item2);
							combinedArray.push(combinedItem);
						}
					});
				});
				this.getData();
				this.initEchart(combinedArray);
			});
		},
		initEchart(valData) {
			var myChart = echarts.init(this.$refs.chart);
			var option;
			let seriesData = [];
			let xData = [];
			for (let i = 0; i < this.valueType.length; i++) {
				let obj = {
					type: 'line',
				};
				let arr = valData.filter((item) => item.id == this.valueType[i]);
				obj.name = arr.length > 0 ? arr[0].name : '';
				obj.data = arr.map((i) => i.value);
				xData = arr.map((i) => i.time);
				seriesData.push(obj);
			}
			option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				legend: {
					data: (function () {
						return valData.map((i) => i.name);
					})(),
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '5%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					axisTick: {
						alignWithLabel: true,
					},
					data: xData,
				},
				yAxis: {
					type: 'value',

					axisLabel: {
						width: 20,
					},
				},
				series: seriesData,
			};

			option && myChart.setOption(option);
		},
		// 	let myChart = echarts.getInstanceByDom(this.$refs.chart);
		// 	if (myChart) {
		// 		myChart.dispose();
		// 	}
		// 	let myChart1 = echarts.init(this.$refs.chart);
		// 	myChart1.setOption({
		// 		tooltip: {
		// 			trigger: 'axis',
		// 			axisPointer: {
		// 				type: 'shadow',
		// 			},
		// 		},
		// 		legend: {
		// 			data: (function () {
		// 				return arr.map((i) => i.unitName);
		// 			})(),
		// 		},
		// 		grid: {
		// 			left: '3%',
		// 			right: '4%',
		// 			bottom: '3%',
		// 			containLabel: true,
		// 		},
		// 		xAxis: [
		// 			{
		// 				type: 'category',
		// 				// boundaryGap: false,
		// 				data: xData,
		// 				axisTick: {
		// 					alignWithLabel: true,
		// 				},
		// 			},
		// 		],
		// 		yAxis: [
		// 			{
		// 				type: 'value',
		// 				axisLabel: {
		// 					width: 20,
		// 				},
		// 			},
		// 		],
		// 		series: (function () {
		// 			return arr.map((item) => {
		// 				return {
		// 					name: item.unitName,
		// 					type: 'line',
		// 					// type: 'bar',
		// 					// barWidth:'30px',
		// 					// barMaxWidth: '30px', // 柱状图最大宽度
		// 					// barMinWidth: '6px', // 柱状图最小宽度
		// 					data: item.comprehensiveData,
		// 				};
		// 			});
		// 		})(),
		// 	});
		// },
		exportBtn() {
			if (this.resData.length === 0) return this.$message.warning('暂无数据,无法导出!');
			const excelData = [];
			this.resData.forEach((item) => {
				delete item.$cellEdit;
				delete item.$index;
				delete item.forwardActiveEnergy;
				excelData.push({
					时间: item.hour,
					A相电压: item.aphaseVoltage,
					B相电压: item.bphaseVoltage,
					C相电压: item.cphaseVoltage,
					A相电流: item.aphaseCurrent,
					B相电流: item.bphaseCurrent,
					C相电流: item.cphaseCurrent,
					总有功功率: item.totalActivePower,
				});
			});
			const options = {};
			options.fileName = '供配电报表'; //表格名称
			options.datas = [
				{
					sheetData: excelData, // 表格数据
					sheetName: 'sheet',
					sheetFilter: ['时间', 'A相电压', 'B相电压', 'C相电压', 'A相电流', 'B相电流', 'C相电流', '总有功功率'], // 表头对应的sheetData的数据
					sheetHeader: ['时间', 'A相电压', 'B相电压', 'C相电压', 'A相电流', 'B相电流', 'C相电流', '总有功功率'], //  表头名称
					// columnWidths: ["8", "8"] // 列宽
				},
			];
			const toExcel = new ExportJsonExcel(options);
			window.XLSX = XLSX;
			toExcel.saveExcel();
		},
		getNowDate() {
			let dateObj = getDateByType();
			let obj = {
				year: '',
				month: '',
				date: '',
				hours: '',
				minutes: '',
				seconds: '',
			};
			obj.year = String(dateObj.year);
			obj.month = dateObj.year + '-' + dateObj.month;
			obj.date = dateObj.year + '-' + dateObj.month + '-' + dateObj.date;
			obj.hours = dateObj.year + '-' + dateObj.month + '-' + dateObj.date + ' ' + dateObj.hours;
			obj.minutes = dateObj.year + '-' + dateObj.month + '-' + dateObj.date + ' ' + dateObj.hours + ':' + dateObj.minutes;
			obj.seconds = dateObj.year + '-' + dateObj.month + '-' + dateObj.date + ' ' + dateObj.hours + ':' + dateObj.minutes + ':' + dateObj.seconds;
			return obj;
		},
		updateStatisticYear(obj) {
			this.startYear = obj.startYear;
			this.endYear = obj.endYear;
		},

		dateTypeChange3(val) {
			this.subIndex3 = '';
			this.dateItmeType = val;
			let compareType;
			// if (val == 'year') {
			// 	this.selectOption = 0;
			// 	this.dateFormat3 = 'YYYY';
			// 	this.timeValue3 = this.getNowDate().year;
			// } else if (val == 'month') {
			// 	this.selectOption = 0;
			// 	this.dateFormat3 = 'YYYY-MM';
			// 	this.timeValue3 = this.getNowDate().month;
			// } else if (val == 'date') {
			// 	this.selectOption = 0;
			// 	this.dateFormat3 = 'YYYY-MM-DD';
			// 	this.timeValue3 = this.getNowDate().date;
			// } else {
			this.selectOption = 1;
			this.dateFormat2 = 'YYYY-MM-DD HH:mm:ss';
			// this.value2 = [this.getNowDate().seconds, this.getNowDate().seconds];
			this.value2 = [this.getNowDate().date + ' 00:00:00', this.getNowDate().date + ' 23:59:59'];
			// }

			// if (this.dateItmeType == 'date') {
			// 	compareType = 2;
			// } else if (this.dateItmeType == 'month') {
			// 	compareType = 2;
			// } else if (this.dateItmeType == 'year') {
			// 	compareType = 1;
			// } else {
			compareType = 0;
			// }
			this.getForm();
		},
		pickerOptions1(time) {
			return time.getTime() > Date.now();
		},
		changeDate3(val) {
			// this.timeValue3 = val;
			// this.subIndex3 = '';
			// let compareType;
			// if (this.dateItmeType == 'date') {
			// 	compareType = 2;
			// } else if (this.dateItmeType == 'month') {
			// 	compareType = 2;
			// } else {
			compareType = 1;
			// }
			this.getForm();
		},
		changeDate2() {
			this.getForm();
		},
	},
};
</script>
<style lang="scss" scoped>
.el-card {
	height: 100%;
}

.seach {
	display: flex;
	justify-content: center;
	align-items: center;
}

.seach-box {
	display: flex;
	justify-content: start;
	padding-left: 10px;
	gap: 20px;
	align-items: center;
	margin-bottom: 10px;

	.label {
		font-size: 15px;
		margin-right: 5px;
	}
}

.chart {
	height: 700px;
}
.select-con {
	display: flex;
	align-items: center;
	:deep(.el-select) {
		margin-left: 5px;
		width: 60px;

		.el-input {
			height: 36px;
			line-height: 36px;
			.el-input__wrapper {
				border-radius: 4px 0 0 4px;
			}
		}
	}
}
.time-picker {
	:deep(.el-date-editor) {
		height: 36px;
		width: 260px;
	}
	:deep(.el-input__wrapper) {
		border-radius: 0 4px 4px 0;
	}
	.yearPicker {
		height: 36px;
		width: 280px;
		border-radius: 0 4px 4px 0;
	}
}
:deep(.option-select) {
	width: 60px;
	margin-left: 10px;
	.el-input__wrapper {
		height: 36px;
	}
}
.date-select {
	margin-left: -10px;
}
.fenxi-select {
	width: 103px;
}
</style>
